<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>英雄管理主页</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css" />
  <style>
    .panel {
      width: 900px;
      margin: 10px auto;
    }

    .table img {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">英雄列表管理</div>
      <div class="panel-body">
        <!-- 存放的搜索区域 -->
        <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" id="hname" class="form-control" placeholder="输入英雄信息..." />
              <span class="input-group-btn">
                <button class="btn btn-default" id="btn_search" type="button">搜索</button>
              </span>
            </div>
            <!-- /input-group -->
          </div>
          <!-- /.col-lg-6 -->
          <div class="col-lg-3 col-lg-offset-3">
            <!-- 添加英雄的按钮 -->
            <!-- 
              🧨调用模态框的两个属性：
                  data-toggle="modal"                 🧨 调用切换模态框功能
                  data-target="#exampleModal"         🧨 要调用哪个模态框
            -->
            <button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-success">
              添加英雄
            </button>
          </div>
        </div>
      </div>

      <!-- Table -->
      <table class="table">
        <thead>
          <tr>
            <th>编号</th>
            <th>英雄名称</th>
            <th>英雄性别</th>
            <th>头像</th>
            <th>操作区</th>
          </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody id="tbody">
          <!-- tr 是一行内容 -->
          <tr>
            <td>1</td>
            <td>大乔</td>
            <td>女</td>
            <td><img src="" /></td>
            <td>
              <button type="button" class="btn btn-warning">上传头像</button>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 上传按钮  display: none; 把按钮隐藏起来，但是点击按钮还是可以实现上传的 -->
    <input type="file" id="uploadFile" style="display: none" />

    <!-- 🧨模态框的结构 - CV过来的 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="exampleModalLabel">添加英雄</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">英雄名称:</label>
                <input type="text" placeholder="请输入英雄名称" class="form-control" id="heroName" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">英雄性别:</label>
                <label><input type="radio" checked value="男" name="gender" /> 👦男生</label>
                <label><input type="radio" value="女" name="gender" /> 👩‍🦰女生</label>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button id="addHeroBtn" type="button" class="btn btn-primary">添加</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 🧨 必须先引入 jquery.js 再引入 bootstrap.js -->
  <script src="./lib/jquery/jquery.min.js"></script>
  <script src="./lib/bootstrap/js/bootstrap.js"></script>
  <script>
    $(function () {
      $.ajaxSetup({
        headers: {
          Authorization: localStorage.getItem('token'),
        }
      });
      /* 
      上传英雄头像
        1. 点击弹出上传文件窗口
        2. 上传按钮值发生改变时，把图片上传到服务器
        3. 图片上传成功，服务器会返回图片的在服务端的路径
        4. 把图片路径更新到英雄信息中
        5. 重新获取英雄列表数据
    */

      // 1.5 调用封装好的函数
      getHeroList()

      // 🎁 2.1 搜索按钮绑定点击事件
      $('#btn_search').click(() => {
        // 🎁 2.2 调用获取英雄的函数
        getHeroList()
      })

      // 3.1 点击添加英雄
      $('#addHeroBtn').click(() => {
        // console.log('点击添加英雄');
        const heroName = $('#heroName').val().trim()
        // :checked 获取选中状态的单选框
        const gender = $('[name="gender"]:checked').val()
        // console.log(heroName);
        // console.log(gender);

        // 面向接口编程，调用接口
        $.ajax({
          method: 'POST',
          url: 'http://127.0.0.1:3001/hero/addHero',
          data: {
            name: heroName,
            gender: gender,
            img: '',
          },

          success: (res) => {
            // console.log(res)
            // 隐藏模态框
            $('#exampleModal').modal('hide')
            // 重新获取所有英雄数据，并替换到原本的 tbody 布局中
            getHeroList()
          }
        })
      })

      // 4.1 删除英雄 -
      //    1. 事件委托方式绑定事件，因为删除按钮是动态创建的
      //    2. 用 function 书写回调函数，因为事件处理函数内部需要用到 this
      $('#tbody').on('click', '.btn-danger', function () {
        // 获取自定义 id
        const id = $(this).attr('data-id')
        // console.log('你点击删除按钮的自定义id为', id);
        // 面向接口编程，调用根据 id 删除英雄的接口
        $.ajax({
          method: 'GET',
          url: 'http://127.0.0.1:3001/hero/delHeroById/' + id,
          data: { id: id },
          headers: {
            Authorization: localStorage.getItem('token'),
          },
          success: (res) => {
            console.log(res)
            // 服务器删除英雄成功，浏览器端重新获取英雄列表
            getHeroList()
          },
        })
      })

      // 😨 5.1 上传头像按钮点击
      $('#tbody').on('click', '.btn-warning', function () {
        console.log('你点击了上传头像的按钮')
        // 调用真正的上传文件按钮
        $('#uploadFile').click()
        // 获取列表按钮中的自定义 id 属性
        const id = $(this).attr('data-id')
        // 把自定义 id 属性添加到 真正的上传按钮中
        $('#uploadFile').attr('data-id', id)
      })

      // 😨 5.2 真正的上传按钮
      $('#uploadFile').change(function () {
        // 获取元素身上的 id ，用于后期更新图片的
        const id = $(this).attr('data-id')
        console.log(id)
        // 获取文件对象
        const filesObj = $('#uploadFile').get(0).files[0]
        // console.log(filesObj);

        // 准备 FormData 对象，以后作为 ajax 的请求参数
        const fd = new FormData()
        fd.append('file_data', filesObj)

        // Ajax 请求，注意 FormData 上传的时候注意的 3 个问题
        $.ajax({
          method: 'POST',
          url: 'http://127.0.0.1:3001/hero/uploadFile',
          data: fd, // FormData 直接作为参数
          headers: {
            Authorization: localStorage.getItem('token'),
          },
          processData: false, // 无需 jq 处理数据
          contentType: false, // 无需 jq 处理内容类型
          success: (res) => {
            console.log(res.src)
            // 更新头像
            $.ajax({
              method: 'POST',
              url: 'http://127.0.0.1:3001/hero/updateHero',
              data: {
                id: id,
                img: res.src.replace('\\', '/'),
              },
              headers: {
                Authorization: localStorage.getItem('token'),
              },
              success: (res) => {
                // 当图片更新成功后，再获取最新的列表数据
                getHeroList()
              },
            })
          },
        })
      })

      // 1.1 封装一个获取英雄的函数
      function getHeroList() {
        const heroName = $('#hname').val().trim()
        console.log(heroName)
        // 1.2 面向接口编程，请求三要素
        $.ajax({
          method: 'GET',
          url: 'http://127.0.0.1:3001/hero/getHeroList',
          // 按照规范请求头传递 Authorization
          headers: {
            Authorization: localStorage.getItem('token'),
          },
          data: {
            // 🎁 2.3 接口文档规定：可根据英雄名获取，传空则获取全部英雄
            heroName: heroName,
          },
          // error:(error,res) => {
          //   // debugger
          //   console.dir(error)
          //   console.dir(res)
          // },
          success: (res) => {
            // 1.3 打印出来数据，分析数据的结构
            // console.log(res)
            // if (res.code === -1) {
            //   alert('没有登录权限')
            //   return (location.href = './login.html')
            // }

            // 1.4 把数据渲染到页面中
            let htmlStr = ''
            // 找到英雄列表的数组，forEach 遍历
            res.data.forEach((item, index) => {
              // 字符串拼接
              htmlStr += `<tr>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.gender}</td>
                            <td><img src="http://127.0.0.1:3001${item.img}"></td>
                            <td>
                              <button type="button" data-id="${item.id}" class="btn btn-warning">上传头像</button>
                              <button type="button" data-id="${item.id}" class="btn btn-danger">删除</button>
                            </td>
                          </tr>`
            })
            // forEach 拼接结束后，一次性写入(覆盖)页面中
            $('#tbody').html(htmlStr)
          },
        })
      }
    })

    $(document).ajaxError(function (event, request, settings) {
      if (request.status === 401) {
        alert(request.responseJSON.msg)
        return (location.href = './login.html')
      }
    });

  </script>
</body>

</html>